<template>
	<view>
		<view class="section">
			<view class="section-1 flex-align">
				<view class="image">
					<image :src="data.cover"></image>
				</view>
				<view class="detail">
					<view>
						<view class="detail-1">
							{{ data.name }}
						</view>
						<view class="flex-align" style="margin-top: 30rpx">
							<view v-for="(item, index) in checkedSpec" :key="index" style="margin-right: 10rpx">
								<u-tag :text="item.name"></u-tag>
							</view>
						</view>
					</view>
					<view style="
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		  ">
						<view class="price">￥<text>{{ price }}</text>
						</view>
						<view class="detail-2">剩余名额22:<text style="color: orange">{{
		      chooseStock
		    }}</text></view>
					</view>
				</view>
			</view>
		
			<view class="section-2" v-for="(item, index) in data.data_specs" :key="index">
				<view class="sub-title">{{ item.name }}</view>
				<view class="tag-list">
					<u-tag v-for="(item2, index2) in item.list" :key="index2" :text="item2.name" :bgColor="
		    checkedSpec.indexOf(item2) > -1
		      ? 'rgba(47, 117, 250, 0.05)'
		      : '#EFEFEF'
		  " :borderColor="
		    checkedSpec.indexOf(item2) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
		  " :color="checkedSpec.indexOf(item2) > -1 ? '#2F75FA' : '#333'" @click="clickSpec(item2)" />
					<!-- <view class="tag" v-for="item2 in item.list" :key="item2">{{item2.name}}</view> -->
		
				</view>
			</view>
			<view class="btns" @click="handSubmit" v-if="chooseStock > 0">确定</view>
			<view class="btns_s" v-if="chooseStock == 0">确定</view>
		</view>
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	export default {
		
		data() {
			return {
				alertShow: false,
				selectAlertShow: false, //选择商品
				tabActiveIndex: 0,
				list1: [{
					name: "购买说明"
				}, {
					name: "用户须知"
				}],
				timeData: {},
				id: 0,
				data: {},
				venue_name: "",
				checkedSpec: [],
				checkedSpecStr: "",
				price: "0.00",
				venue_id: 0,
				chooseStock: 0,
				sum: '',
				sku: '',
				
			};
		},
		
		onLoad(options) {
			console.log(options,5555)
			this.id= options.id
			this.venue_id = options.venue_id
			this.venue_name = options.venue_name
		
		},
		
		methods: {
			selectAlertShowlist() {
				if (uni.getStorageSync("openid") == '') {
					uni.showToast({
						title: '请登录！',
						icon: 'exception',
						duration: 850
					});
					uni.reLaunch({
						url: '/pages/personal/personal'
					})
				} else {
					this.selectAlertShow = true
				}
			},
	
			clickSpec(name) {
				console.log(name, '6')
				this.checkedSpecStr = "";
				console.log(this.checkedSpec, '1122')
				this.checkedSpec.some((item, index) => {
					console.log(item, '7')
					if (item.group == name.group) {
						this.checkedSpec[index] = name;
						this.$forceUpdate();
					}
				});
				this.checkedSpec.forEach((item, index) => {
					this.checkedSpecStr += `${item.group}::${item.name};;`;
				});
				this.checkedSpecStr = this.checkedSpecStr.substring(
					0,
					this.checkedSpecStr.lastIndexOf(";;")
				);
				this.getSkuData(this.checkedSpecStr);
			},
			// 获取培训班详情
			async getTrainDetail() {
				let postData = {
					train_id: this.id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let res = await train.getTrainDetail(postData);
				if (res.code == 1) {
					this.data = res.data.train;
					let defaultObj = this.data.data_specs;
					let defaultObjLength = this.data.data_specs.length;
					// int sum = 0;
					var data_items = this.data.data_items
					var sum = 0;
					data_items.forEach((item, index) => {
						sum += parseFloat(item[0].stock);
						this.sum = sum
						return sum;
					})
	
					for (var i = 0; i < defaultObjLength; i++) {
						this.checkedSpec.push(defaultObj[i].list[0]);
					}
					this.checkedSpecStr = "";
					this.checkedSpec.forEach((item, index) => {
						this.checkedSpecStr += `${item.group}::${item.name};;`;
					});
					this.checkedSpecStr = this.checkedSpecStr.substring(
						0,
						this.checkedSpecStr.lastIndexOf(";;")
					);
					this.getSkuData(this.checkedSpecStr);
				}
			},
			// 获取SKU数据
			getSkuData(checkedSpecStr) {
				for (var items = 0; items < this.data.data_items.length; items++) {
					if (checkedSpecStr == this.data.data_items[items][0].key) {
						console.log(this.data.data_items[items], '8855');
						this.price = this.data.data_items[items][0].selling;
						this.chooseStock = this.data.data_items[items][0].stock;
						this.sku = this.data.data_items[items][0].sku;
	
					}
				}
			},
			handSubmit() {
				console.log(1212, this.sku)
				console.log(1313, this.data.code)
				let checkedSpec = JSON.stringify(this.checkedSpec);
				let price = this.price;
				uni.navigateTo({
					url: "/pages_other/train/selectStudy?id=" +
						this.data.id +
						"&checkedSpec=" +
						checkedSpec +
						"&price=" +
						price +
						"&venue_name=" +
						this.venue_name +
						"&venue_id=" +
						this.venue_id +
						"&chooseStock=" +
						this.chooseStock +
						"&sku=" +
						this.sku +
						"&skucode=" +
						this.data.code,
				});
			},
			changeTab(data) {
				this.tabActiveIndex = data.index;
			},
			close2() {
				this.selectAlertShow = false;
			},
			close() {
				this.alertShow = false;
			},
			openStoreShow() {
				this.alertShow = true;
			},
			onChange(e) {
				this.timeData = e;
			},
			back() {
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.section {
		padding: 24rpx;
		
		.btns {
			background: linear-gradient(0deg, #528EFF, #2F75FA);
			border-radius: 20px;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			padding: 26rpx 0;
			margin: 0px 30rpx;
			margin-top: 120rpx;
			text-align: center;
		}
	
		.btns_s {
			background: linear-gradient(0deg, #bebebe, #bebebe);
			border-radius: 20px;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			padding: 26rpx 0;
			margin: 0px 30rpx;
			margin-top: 120rpx;
			text-align: center;
		}
	
		.section-1 {
			height: 200rpx;
	
	
	
			.image {
				width: 200rpx;
				height: 100%;
				margin-right: 26rpx;
				border-radius: 10rpx;
				overflow: hidden;
	
				image {
					width: 100%;
					height: 100%;
				}
			}
	
			.detail {
				flex: 1;
				width: 0;
				display: flex;
				height: 100%;
				flex-direction: column;
				justify-content: space-between;
	
				.detail-1 {
					font-size: 27rpx;
					font-weight: 500;
					color: #333333;
				}
	
				.detail-2 {
					font-size: 24rpx;
					font-weight: 500;
					color: #888888;
					margin-top: 12rpx;
				}
	
				.price {
					font-size: 20rpx;
					font-weight: 500;
					color: #ff0000;
	
					text {
						font-size: 32rpx;
						font-weight: 700;
					}
				}
			}
		}
	
		.section-2 {
			margin-top: 50rpx;
	
			.sub-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 20rpx;
			}
	
			.tag-list {
				display: flex;
				flex-wrap: wrap;
	
				/deep/.u-tag {
					margin-left: 30rpx;
					margin-bottom: 30rpx;
				}
	
				// .tag{
				// 	background: #EFEFEF;
				// 	border-radius: 3px;
				// 	font-size: 24rpx;
				// 	font-weight: 500;
				// 	color: #FFFFFF;
				// 	padding: 7rpx 20rpx;
				// 	margin-right: 20rpx;
				// 	margin-bottom: 20rpx;
				// }
	
			}
		}
	
		.section-3 {
			font-size: 22rpx;
			font-weight: 500;
			color: #333333;
		}
	}
</style>